<template>
  <!-- 申请资源 -->
  <div class="app-container">
    <div class="app-wrap">
      <div class="width50">
        <el-form ref="resourceForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
          <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
            <div class="title width25" style="color:#333333">
              {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
            </div>
            <div class="content width80">
              <el-form-item class="item-clear" v-show="item.key=='id'" label="" prop="user_id">
                <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.user_id" controls-position="right" clearable placeholder="请输入玩家ID" style="width:240px"/>
              </el-form-item>
              <el-form-item class="item-clear" v-show="item.key=='title'" label="" prop="title">
                <el-input type="text" v-model="formParams.title" clearable placeholder="请输入申请标题" />
              </el-form-item>
              <el-form-item class="item-clear" v-show="item.key=='content'" label="" prop="content" style="height:auto;padding-bottom:5px">
                <el-input type="textarea" :rows="4" v-model="formParams.content" clearable placeholder="请输入申请内容" />
              </el-form-item>
              <el-form-item class="item-clear" v-show="item.key=='reason'" label="" prop="reason" style="height:auto;padding-bottom:5px">
                <el-input type="textarea" :rows="4" v-model="formParams.reason" clearable placeholder="请输入申请理由" />
              </el-form-item>
              <el-form-item class="item-clear" v-show="item.key=='prop'" label="">
                <el-select class="width100" v-model="formParams.item_content" placeholder="请选择道具类型" multiple filterable @change="choosePropItem">
                  <el-option :label="second.label" :value="second.value" v-for="(second, two) in propData" :key="two"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="item-clear" v-show="item.key=='time'" label="">
                <el-date-picker is-range v-model="formParams.effect_time_str" type="datetime" class="full-width-input time-box" clearable></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <el-button class="marginT20" size="medium" type="primary" v-permission="'resourcesReport.add'" icon="el-icon-sort" :disabled="!choosePropDataList.length && !brnShow" @click="isShowDetails = true" style="margin-left:88%">申 请</el-button>
      </div>
      <div class="flexWrap marginT20">
        <div class="prooItem" v-for="(item, index) in choosePropDataList" :key="index">
          <p style="margin: 0 0 5px 0;">{{ item.label }}：</p>
          <el-input-number :min="0" :max="999999999999" :precision="0" v-model="item.num" controls-position="right" clearable placeholder="请输入道具数量" style="width:200px"/>
        </div>
      </div>
      <el-dialog title="资源申请" :visible.sync="isShowDetails" width="50%" top="200px" :before-close="onHideDetails" modal-append-to-body>
        <div class="propDeduct" style="margin-top:-20px">
          <p>确认给玩家：【 <span class="colorRed">{{formParams.user_id}}</span> 】发放道具?</p>
          <div class="flexWrap marginT20">
            <div class="marginR10" v-for="(item, index) in choosePropDataList" :key="index">
              <span>{{ item.label }}：【<span class="colorRed">{{ item.num }}</span>】</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="isShowDetails = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="handleConfirm('resourceForm')">确 定</el-button>
        </span>
      </el-dialog>
      <GoogleCheck ref="GoogleCheck" :show="googleCheckShow" :type="1" @handleConfirm="handleConfirm('resourceForm')" @handleClose="handleClose"/>
    </div>
  </div>

</template>

<script>
import {
  applyResource
} from '@/api/player'
import GoogleCheck from '@/components/GoogleCheck'
export default {
  name: 'apply',
  components: {
    GoogleCheck
  },
  data () {
    return {
      languageDataArray: this.$store.state.commonState.languageDataArray,
      propData: this.$store.state.commonState.propDataArray,
      isShowDetails:false,
      itemData: [
        { label: '玩家ID', key: 'id' ,pass:true},
        { label: '申请标题', key: 'title' ,pass:true},
        { label: '申请内容', key: 'content' ,pass:true},
        { label: '申请理由', key: 'reason' ,pass:true},
        { label: '选择道具', key: 'prop' },
        { label: '邮件展示时间', key: 'time' },
      ],
      formParams: {
        user_id:'', //用户id
        title: '', //标题
        content: '', //内容
        reason: '', //原因
        item_content: '', //道具内容
        effect_time_str: '', //邮件展示时间
      },
      choosePropDataList: [],
      googleCheckShow:false,
      ruleForm: {
        user_id: [{ required: true, trigger: 'blur', message: '请输入用户ID', }],
        title: [{ required: true, trigger: 'blur', message: '请输入申请标题', }],
        content: [{ required: true, trigger: 'blur', message: '请输入申请内容', }],
        reason: [{ required: true, trigger: 'blur', message: '请输入申请理由', }],
      },
      brnShow:false
    }
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      // 邮件展示时间
      if(params.effect_time_str && new Date(params.effect_time_str).getTime() <= new Date().getTime()){
        return that.$message.error('邮件展示时间不能小于等于当前时间')
      }else if(params.effect_time_str){
        params.effect_time_str = that.$public.standardDate(params.effect_time_str)
      }
      params.item_content=that.arrToStr(that.choosePropDataList)
      that.brnShow=true
      // 谷歌验证码
      // if(!that.$refs.GoogleCheck.formParams.google_code){
      //   return that.googleCheckShow=true
      // }else{
      //   that.googleCheckShow=false
      // }
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          applyResource(params).then(function (res) {
            if(res.code==1){
              that.$message.success(res.msg)
              that.onHideDetails()
            }
            that.brnShow=false
          }).catch((error) => {
            that.brnShow=false
            that.$message.error(error.msg)
          })
        } else {
          return false;
        }
      });
    },
    // 选择道具
    choosePropItem (val) {
      let that = this;
      that.choosePropDataList = []
      that.propData.map(item => {
        val.map(first => {
          if (item.value == first) {
            item.num=0
            that.choosePropDataList.push(item)
          }
        })
      })
    },
    // 道具设置
    arrToStr (arr) {
      let reward = '';
      arr.map(item => {
        reward += item.value + ',' + this.$public.mathNumberMultiply(item.num,10000) + ';'
      })
      reward = reward.substring(0, reward.length - 1)
      return reward
    },
    // 取消谷歌验证码
    handleClose(){
      this.googleCheckShow=false
    },
    onHideDetails(){
      this.isShowDetails=false
      this.googleCheckShow=false
      this.formParams={
        user_id:'', //用户id
        title: '', //标题
        content: '', //内容
        reason: '', //原因
        item_content: '', //道具内容
      },
      this.choosePropDataList=[]
    }
  }
}
</script>

<style scoped lang="scss">
.prooItem {
  margin: 10px;
  font-size: 21px;
  font-weight: 600;
  p {
    height: 24px;
  }
}
.propDeduct{
  font-size: 18px;
  font-weight: 600;
  .colorRed{
    font-size: 21px;
  }
}
</style>
